<template>
	<div class="if_itemt" :style="'background-image:url( ' + myApp.srcPath('invite_bg.png') +')'">
		<van-nav-bar :fiex="true" :border="false" title="邀请好友" left-arrow @click-left="onClickLeft" />

		<div class="if_content" :style=" 'background-image:url(' + myApp.srcPath('invite_center_bg.png') +')'">

			<div class="ifc_top" :style="'background-image:url(' + myApp.srcPath('invite_top_bg.png') +')'">
				我的邀请码
			</div>

			<div class='ifc_code'>
				{{sharCode}}
			</div>

			<div class="ifc_copy" @click="copy()">
				复制
			</div>

			<div class="ifc_copyText">复制邀请码，邀请更多好友来加入</div>

			<div class="if_ewm" id="qrcode" ref="qrcode" @touchstart="showDownStatus()"  @touchmove="clearQRcode()" @touchend="clearQRcode()">
			</div>

			<div class="ifc_saveEwm">长按保存二维码分享</div>

		</div>
		
		<van-popup v-model="showDown" position="bottom">
			
			<div class="if_showDown">
				<div @click="saveQRcode">
					保存二维码到本地
				</div>
				<div @click="showDown = false">
					取消
				</div>
			</div>
			
		</van-popup>

	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		Popup
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(Popup);

	import {
		InviteCode
	} from '../serve/api.js'

	//二维码生成
	import QRCode from 'qrcodejs2'

	export default {
		created() {

			if(this.$store.state.InviteFriendsData == null){
				
				this.getInviteCode()
				
			}else{
				
				this.sharCode = this.$store.state.InviteFriendsData
				
				this.$nextTick(() => {
					this.createdQRcode()
				})
				
			}

		},
		data() {
			return {

				sharCode: "",

				//长按计时
				timeOutEvent: 0,

				codeBase64: "",
				
				//底部下载窗口
				showDown:false

			}
		},

		methods: {
			//保存二维码
			saveQRcode(){
				
				let imgData = this.codeBase64
				
				let type = 'png';
				
				console.log(imgData, '撒大事撒旦撒')
				
				var _fixType = function(type) {
					type = type.toLowerCase().replace(/jpg/i, 'jpeg');
					var r = type.match(/png|jpeg|bmp|gif/)[0];
					return 'image/' + r;
				};
				
				// 加工image data，替换mime type
				imgData = imgData.replace(_fixType(type), 'image/octet-stream');
				
				/**
				 * 在本地进行文件保存
				 * @param  {String} data     要保存到本地的图片数据
				 * @param  {String} filename 文件名
				 */
				var saveFile = function(data, filename) {
					var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
					save_link.href = data;
					save_link.download = filename;
				
					var event = document.createEvent('MouseEvents');
					event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
					save_link.dispatchEvent(event);
				};
				
				// 下载后的文件名
				var filename = '二维码 .' + type;
				// download
				saveFile(imgData, filename);
				
			},
			
			//移开清除定时器
			clearQRcode() {

				clearTimeout(this.timeOutEvent)
				this.timeOutEvent = 0

			},
			
			//长按保存事件
			showDownStatus() {

				this.timeOutEvent = setTimeout(() => {
					
					this.timeOutEvent = 0

					this.showDown = true

				}, 1000)

			},

			//获取邀请码和 分享二维
			getInviteCode() {

				let params;

				InviteCode(params, (res) => {

					if (res.data.code == 1) {

						this.sharCode = res.data.data
						
						this.$store.state.InviteFriendsData = res.data.data

						//生成二维码
						this.$nextTick(() => {
							this.createdQRcode()
						})

					}else{
						
						this.$store.state.InviteFriendsData = null
						
					}

				}, (error) => {
					
					this.$store.state.InviteFriendsData = null

				})

			},
			
			//根据链接生成二维码
			createdQRcode() {
				let _this = this

				let qrcode = new QRCode('qrcode', {
					width: 200, // 设置宽度，单位像素
					height: 200, // 设置高度，单位像素
					text: _this.myApp.GetDomaiName() + 'Login?id=' + _this.sharCode, // 设置二维码内容或跳转地址
					render: 'canvas'
				})
				// console.log(qrcode._el.children[1])

				setTimeout(() => {

					this.codeBase64 = qrcode._el.children[1].currentSrc

					// console.log(this.codeBase64, "this.codeBase64")

				}, 2000)


			},
			
			//复制文字
			copy() {

				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', this.sharCode);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					Toast("成功复制到剪切板！")
				}
				document.body.removeChild(input);

			},

			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	img { pointer-events: none; }
	
	.if_showDown div:first-child{
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	
	.if_showDown div{
		padding: .3rem;
		text-align: center;
	}
	
	.if_showDown{
		font-size: .36rem;
		/* padding: .3rem; */
		box-sizing: border-box;
	}
	
	#qrcode>>>img {
		width: 2.77rem !important;
		height: 2.77rem !important;
	}

	.ifc_saveEwm {
		font-size: .28rem;
		margin-top: .4rem;
		text-align: center;
	}

	.if_ewm {
		font-size: .32rem;
		width: 2.77rem;
		height: 2.77rem;
		margin: auto;
		margin-top: 1.52rem;
		background: rgba(213, 213, 213, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ifc_copyText {
		color: #333333;
		font-size: .28rem;
		text-align: center;
		margin-top: .4rem;
	}

	.ifc_copy {
		width: 1.4rem;
		height: .68rem;
		background: rgba(146, 149, 255, 1);
		border-radius: .34rem;
		color: white;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .28rem;
		margin-top: .68rem;
	}

	.ifc_code {
		text-align: center;
		margin: auto;
		margin-top: .91rem;
		font-size: .72rem;
		font-weight: bold;
		color: #595FE7;
	}

	.ifc_top {
		width: 5.02rem;
		height: .27rem;
		margin: auto;
		font-size: .36rem;
		font-weight: bold;
		background-size: 100%;
		color: #595FE7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.if_content {
		padding-top: .78rem;
		width: 7.15rem;
		height: 10.7rem;
		margin: auto;
		margin-top: .75rem;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.ti_jifeng {
		height: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: .26rem;
	}

	.if_itemt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: #FBFBFB;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
